<script setup lang="ts">
import {ECode, iconFontAddress, PagePath} from "@/util/commonUtil";
import {createFromIconfontCN, FireOutlined, UserOutlined} from "@ant-design/icons-vue";
import {router} from "@/router";
import _ from 'lodash';
import {ref, computed, onBeforeMount} from "vue";
import {useAppConfigStore} from "@/store/system/appConfigStore";
import {getCollectCount} from "@/api/collect/collect";

const props = defineProps({
  postData: {
    type: Object,
    default: () => ({})
  },
  resourceType: {
    type: String,
    default: ''
  }
});

onBeforeMount(()=>{
  checkCollectStatus()
})

const typeList = ref(['pink', 'red', 'orange', 'green', 'cyan', 'blue', 'purple'])
// 引入阿里图标库
const IconFont = createFromIconfontCN({
  scriptUrl: iconFontAddress,
});
const componentShowMap = computed(() => useAppConfigStore().componentShowMap)
const isCollect = ref<boolean>(false)
const collectCount = ref<number>(0)

function goToSortList(uid: any) {
  router.push({
    path: PagePath.ResultsPath,
    query: {sortUid: uid}
  })
}

function goToTagList(uid: any) {
  router.push({
    path: PagePath.ResultsPath,
    query: {tagUid: uid}
  })
}

function checkCollectStatus() {
  if (!props.postData.uid) {
    return
  }
  if (!_.isUndefined(props.postData.collectInfo)) {
    isCollect.value = props.postData.collectInfo.isCollect
    collectCount.value = props.postData.collectInfo.collectCount
    return;
  }
  let params: any = {}
  params.bizUid = props.postData.uid
  params.collectType = props.resourceType
  getCollectCount(params).then((response:any) => {
    if (response.code == ECode.SUCCESS) {
      let collectData = response.data
      isCollect.value = collectData.isCollect
      collectCount.value = collectData.collectCount
    } else {
      isCollect.value = false
    }
  })
}
</script>

<template>
  <header
      class="post-header relative w-full flex flex-col justify-end h-auto m-0 items-center text-center">
    <img v-if="postData.photoList"
         class="postHeaderBg absolute -z-[1] w-full h-full overflow-hidden object-cover blur-xl opacity-30"
         :src="postData.photoList[0]"
         :alt="postData.title">
    <div class="postTitle relative z-[2]">
      <div class="text-balance text-black text-[40px] font-semibold mb-[0.5em]">{{ postData.title }}</div>
      <div class="articleFeedback flex gap-4 justify-center items-center mb-[1em] cursor-pointer">
        <!-- 勘误修正按钮  -->
        <div class="kanWu font-semibold hover:text-rose-500" v-if="componentShowMap.showGeneralEdit">
          <IconFont type="icon-kanwu"/>
          勘误
        </div>
        <div class="shouCang font-semibold hover:text-rose-500" v-if="!isCollect">
          <IconFont type="icon-xiangkan"/>
          收藏
        </div>
        <div class="shouCang font-semibold hover:text-rose-500" v-else>
          <IconFont type="icon-xiangkan"/>
          已收藏
        </div>
      </div>
      <!-- 分类、标签 -->
      <div class="inline-flex justify-between flex-wrap items-center" style="gap: 0 1em;">
        <span class="subject font-semibold" v-if="postData.subject">
          <IconFont type="icon-zhuanti"/>
          <span>{{ postData.subject.subjectName }}</span>
        </span>
        <span v-if="postData.blogSort" class="category cursor-pointer font-semibold"
              @click="goToSortList(postData.blogSort.uid)">
            <IconFont type="icon-category"/>
            {{ postData.blogSort.sortName }}
        </span>
        <span class="tagList flex gap-2" v-if="postData.tagList">
          <template v-for="tag in postData.tagList">
            <a-tag :color="_.sample(typeList)" class="tagItem cursor-pointer font-semibold"
                   @click="goToTagList(tag.uid)">
              <IconFont type="icon-huatifuhao"/>
              {{ tag.content }}
            </a-tag>
          </template>
        </span>
      </div>
      <!-- meta -->
      <div class="postMeta flex flex-wrap justify-center items-stretch w-full z-[2] mt-4">
        <div class="postMetaLeft flex flex-wrap gap-[1em] tabular-nums">
          <div class="blur-saturate flex gap-2 font-semibold" v-if="postData.user">
            <a :href="PagePath.UserCenterPath+'?userUid='+postData.user.uid">
              <UserOutlined/>
              {{ postData.user.nickName }}
            </a>
            <time class="flex-none font-semibold">
              <IconFont type="icon-shijian"/>
              {{ postData.createTime }}
            </time>
          </div>
          <div class="blur-saturate flex gap-2 font-semibold">
            <i class="not-italic">热度</i>
            <span>
              <FireOutlined/>
              {{ postData.clickCount }}
            </span>
          </div>
          <div class="blur-saturate flex gap-2 font-semibold">
            <i class="not-italic">本文共计</i>
            <span class="">
              <IconFont type="icon-tongjifenxi-xiangmubiaogetongji"/>
              {{ postData.charCount }}
            </span>
          </div>
        </div>
        <div class="postMetaRight">
          <aside class="postSummary blur-saturate max-w-[30em] min-h-[68px]">
            <span class="line-clamp-2 leading-[2] font-semibold">{{ postData.summary }}</span>
          </aside>
        </div>
      </div>
    </div>
  </header>
</template>

<style scoped lang="less">
.post-header {
  padding-inline: var(--edge-lr);
  margin-inline: auto;
}

.post-header {
  padding-block: var(--cover-top) var(--gap-divs);
  gap: var(--gap-area);
}

.postHeaderBg {
  transform: scale(1.2);
  mask-image: linear-gradient(180deg, #fff 0%, #fff, transparent 100%);
}

.postTitle {
  max-width: min(1000px, 100%);
  mix-blend-mode: luminosity;
  animation: opacity .25s var(--animation-in) .5s 1 backwards;
}

.postMeta {
  gap: 2em 1em;
}

.postMetaLeft > *, .postSummary {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1em 1.5em;
  flex: 1 0 auto;
  scroll-snap-align: start;
  animation: var(--animation);
}

.postMeta .blur-saturate {
  border-radius: 1em;
  box-shadow: var(--box-shadow);
  backdrop-filter: saturate(1.8) blur(20px);
}
</style>
